<template>
  <div>
    <VRow class="lf-config-row">
      <VCol cols="12">
        <VTextField
          v-model="executorId"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="执行器ID"
          label="执行器ID"
        />
      </VCol>
      <VCol cols="12">
        <VTextField
          v-model="executorName"
          class="lf-config-item"
          counter
          maxlength="50"
          color="success"
          hint="执行器名称"
          label="执行器名称"
        />
      </VCol>
      <VCol cols="12">
        <VAutocomplete
          v-model="executorType"
          class="lf-config-item"
          variant="outlined"
          label="选择执行器类型"
          :items="option.executorType.list"
          item-title="title"
          item-value="value"
          clearable
        />
      </VCol>
      <VCol cols="12">
        <VAutocomplete
          v-model="contextBeans"
          class="lf-config-item"
          variant="outlined"
          label="选择上下文Bean"
          :items="dynamicClassOptions"
          item-title="className"
          item-value="id"
          clearable
          multiple
        />
      </VCol>
      <VCol cols="12">
        <VAutocomplete
          v-model="ivyConfigId"
          class="lf-config-item"
          variant="outlined"
          label="选择配置项"
          :items="configOptions"
          item-title="configName"
          item-value="id"
          clearable
        />
      </VCol>
      <VCol cols="12">
        <ConfigEdit
          v-if="false"
          ref="editRef"
          :curr-row="configRow"
          :option="configOption"
        />
      </VCol>
    </VRow>
  </div>
</template>

<script setup>
import ConfigEdit from '@/views/liteflow/el/configEdit.vue';
import { ref } from 'vue';

const props = defineProps({		
  currRow: Object,
  option: Object,
  options: Object,
  dynamicClassOptions: Object,
  addUrl: String,
  updateUrl: String,
})

const emits = defineEmits(['refreshPage'])

const configRow = ref({})
const configOption = reactive({
  ruleType: {
    label: '',
    list: [],
  },
  styleType: {
    label: '',
    list: [],
  },
  configType: {
    label: '',
    list: [],
  },
  sourceType: {
    label: '',
    list: [],
  },
})


const optionSelect = async () => {
  const res = await $ivyApi.post(API_URLS.lfConfigOption, { 
    fieldNames: 'ruleType,styleType,configType,sourceType', 
  })

  Object.assign(option, res.data)
}

const addUrl = ref(props.addUrl)
const updateUrl = ref(props.updateUrl)

const currRow = ref(props.currRow)
const row = currRow.value

const isEdit = ref(!!row.id)

const configOptions = reactive(props.options)
const dynamicClassOptions = reactive(props.dynamicClassOptions)
const option = reactive(props.option)

const id = ref(row.id || '')
const executorId = ref(row.executorId || '')
const executorName = ref(row.executorName || '')
const executorType = ref(row.executorType || '')
const ivyConfigId = ref(row.ivyConfigId || '')
const contextBeans = ref((row.contextBeans ? row.contextBeans.split(',').map(Number) : []) || [])

const getUrl = () => {
  if(isEdit.value){
    return updateUrl.value
  }
  
  return addUrl.value
}

const saveItem = async () => {
  const res = await $ivyApi.post(getUrl(),{
    id: id.value,
    executorId: executorId.value,
    executorName: executorName.value,
    executorType: executorType.value,
    ivyConfigId: ivyConfigId.value,
    contextBeans: contextBeans.value.join(','),
  })
  emits('refreshPage', res)
}

const selectConfig = async (ivyConfigId) => {
  const res = await $ivyApi.post(API_URLS.lfConfigSelectById,{
    id: ivyConfigId,
  })
  configRow.value = res.data
}

onMounted(() => {
  selectConfig()
  optionSelect(ivyConfigId.value)
})

defineExpose({
  saveItem,
})
</script>

<style scoped>
.lf-config-row .v-col {
  padding-block-end: 3px;
}

.lf-config-item {
  padding-block-start: 8px;
}
</style>
